<template>
  <div>
    <div class="top">
      <br>
      <el-form :inline="true" class="demo-form-inline" style="margin-left:40px ;">
        <el-form-item label="司机账号:">
          <el-input size="medium" placeholder="请输入司机账号" />
        </el-form-item>
        <el-form-item label="司机姓名:" style="margin-left: 100px; margin-right: 100px;">
          <el-input size="medium" placeholder="请输入司机姓名" />
        </el-form-item>
        <el-form-item label="司机手机号:">
          <el-input size="medium" placeholder="请输入司机手机号" />
        </el-form-item>
        <br>
        <!-- <el-form-item label="所属机构:" style="margin-left:13px ;">
          <el-select size="medium" placeholder="请选择所属机构">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select> -->

        <!-- 下拉列表 -->
        <span>所属机构:</span>
        <el-form-item prop="agentId" style="margin-left: 15px;">
          <el-select
            v-model="form.agentId"
            placeholder="请选择所属机构"
            style="width:100%"
            clearable
          >
            <el-tree
              node-key="id"
              :data="treeData"
              class="add_tree"
              :props="defaultProps"
              :expand-on-click-node="false"
              :check-on-click-node="true"
            >
              <span slot-scope="{data}" class="custom-tree-node">
                <el-option
                  style="padding: 0"
                  :label="data.name"
                  :value="data.id"
                /></span></el-tree>
          </el-select>
        </el-form-item>

        <el-button size="medium" type="danger" style="margin-left: 100px;" @click="search">搜索</el-button>
        <el-button size="medium">重置</el-button>

      </el-form>
    </div>
    <div class="below">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column

          type="index"
          label="序号"
          width="100"
        />
        <el-table-column
          prop="name"
          label="司机账号"
          width="200"
        />
        <el-table-column
          prop="name"
          label="司机姓名"
          width="300"
        />
        <el-table-column
          prop="mobile"
          label="司机手机号"
          width="250"
        />
        <el-table-column
          prop="agency.name"
          label="所属机构"
          width="500"
        />
        <el-table-column
          prop="workStatus"
          label="工作状态"
          width="300"
        >
          <template v-slot="{row}">
            <span v-if="row.workStatus===1"> <span class="dot" />工作</span>
            <span v-else> <span class="dot1" />休息</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template v-slot="{row}">
            <el-button
              type="text"
              size="small"
              @click="skipPartitions(row.userId)"
            >查看
            </el-button>

            <el-button
              type="text"
              size="small"
              @click.native.prevent="vehicle(row.userId)"
            >
              <!--  slot-scope="scope"   @click.native.prevent="deleteRow(scope.$index, tableData)" -->
              配置车辆
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        :current-page="pageParams.page * 1"
        :page-sizes="[10,20,50,100]"
        :page-size="pageParams.pageSize * 1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <Configuration :current-node-id.sync="currentNodeId" :show-dialog.sync="showDialog" />
    </div>

  </div>
</template>

<script>
import { driverList } from '@/api/driver'
import { treeList } from '@/api/deliveryman'
import Configuration from './configuration.vue'

export default {
  name: 'Deliveryman',
  components: { Configuration },
  data() {
    return {
      // 树形控件数据
      defaultProps: {
        label: 'name',
        children: 'children',
        value: '',
        emitPath: false
      },
      showDialog: false,
      treeData: [],
      label: '',
      selectOption: '',
      form: {
        account: '',
        agentId: -1 && '',
        name: '',
        phone: ''
      },

      tableData: [],
      pageParams: {
        pageSize: '10',
        page: '1',
        total: 0
      }
    }
  },
  created() {
    this.getList()
    this.getSelect()
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    // 渲染列表
    async getList() {
      const res = await driverList(this.pageParams)
      // console.log(res)
      this.tableData = res.data.data.items
    },
    // 查看的跳转id
    skipPartitions(id) {
      this.$router.push({
        path: `/driverson/${id}`
      })
      console.log(id)
    },
    // 分页器
    handleSizeChange(val) {
      this.pageParams.pageSize = val + ''
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageParams.page = val + ''
      this.getList()
    },
    // 获取树状机构信息
    async getSelect() {
      const result = await treeList()
      this.treeData = JSON.parse(result.data.data)
      console.log(JSON.parse(result.data.data))
    },
    // 搜索功能
    async search() {
      console.log(this.form.agentId)
      this.pageParams = { ...this.pageParams, ...this.form }
      this.$message.success('搜索成功')
      console.log(this.form)
      const res = await this.getList(this.form)
      console.log(res)
    },
    // 配置车辆
    vehicle(id) {
      this.$confirm('<strong>配置车辆需满足一下条件</strong><br/><br/><div><span style="margin-right: 20px;" >1.司机信息</span ><span>2.司机已设置排班</span></div><br/<div>3.司机绑定车辆未在启动状态</div>', '车辆配置', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        console.log('成功')
        this.showDialog = true
        console.log(id)
        this.currentNodeId = id
        console.log(this.showDialog)
      }).catch(() => {

      })
    }

  }

}
</script>

<style>
.top{
  width:100%;
  height:140px ;
  background-color: #fff;
  margin-top: 20px;
}
.below{
  width: 100%;
  height: 600px;
  background-color: #fff;
  margin-top: 15px;
}

</style>
